<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>王者荣耀-主页面下载</title>
  <link rel="stylesheet" href="./css/index.css">
  <style>
    .main {
      height: 100px;
    }

    .news-section {
      display: flex;
      height: 342px;
    }

    .news-section .banner {
      width: 605px;
      background-color: orange;
    }

    .news-section .news {
      flex: 1;
      background-color: purple;
    }

    .news-section .download {
      width: 236px;
      background-color: skyblue;
    }

    .news-section .download a {
      display: block;
      background: url(./img/main_sprite.png) no-repeat;
    }

    .news-section .download .download-btn {
      height: 128px;
      background-position: 0 -219px;
    }

    .news-section .download .guard-btn {
      height: 106px;
      background-position: 0 -350px;
    }

    .news-section .download .experience-btn {
      height: 108px;
      background-position: 0 -461px;
    }

    
  </style>
</head>
<body>

  <div class="main wrapper_v3">
    <div class="news-section">
      <div class="banner"></div>
      <div class="news"></div>
      <div class="download">
        <a href="#" class="download-btn"></a>
        <a href="#" class="guard-btn"></a>
        <a href="#" class="experience-btn"></a>
      </div>
    </div>
    <div class="content-section"></div>
    <div class="match-section"></div>
  </div>
  
</body>
</html>